<template>
  <div class="app-container">
    <!--查询表单-->
    <el-form :inline="true" class="demo-form-inline">
      <!-- <el-form-item>
        <el-steps>手机号</el-steps>
      </el-form-item> -->
      <el-form-item  label="邀请码" >
        <el-input v-model="searchObj.invitation" placeholder="请输入内容"/>
      </el-form-item>

        <el-form-item  label="所属客户" >
        <el-input v-model="searchObj.client" placeholder="请输入内容"/>
      </el-form-item>

      <!-- <el-form-item>
        <el-steps>客户姓名</el-steps>
      </el-form-item> -->
      <el-form-item label="手机号">
        <el-input v-model="searchObj.phone" placeholder="请输入内容"/>
      </el-form-item>
    
      
      <el-form-item lable="操作">
        <el-button type="primary"   icon="el-icon-search" @click="fetchData()">
        查询
      </el-button>
      </el-form-item>
           <el-button
            style="margin-right:10px;height:40px" 
              
             @click="exportData"
            type="primary"
             size="mini"
             icon="el-icon-upload2" >
             导出
             </el-button>
           

      <el-form-item>
        <el-button @click="removeIds" type="danger">
        批量删除
      </el-button>
      </el-form-item>
  

    </el-form>

      <el-table :data="list"
      border
      style="width: 2500px"
      stripe
      @selection-change="handleSelectionChange">
        <el-table-column type="selection" />
        <el-table-column label="序号" width="50">
          <template slot-scope="scope">
            {{ (page - 1) * limit + scope.$index + 1 }}
          </template>
        </el-table-column>
      <el-table-column
        prop="invitation"
        label="邀请码"
      ></el-table-column>
      <el-table-column
        prop="client"
        label="所属客户"
      ></el-table-column>
      <el-table-column
        prop="phone"
        label="手机号"
      ></el-table-column>
       <!--判断是否是投资商-->
      
      <!-- <el-table-column
        prop="d"
        label="隐患优先级"
        width="120"
      ></el-table-column> -->
      <el-table-column prop="inviteUser" label="邀请用户"></el-table-column>
      <!-- <el-table-column prop="f" label="发生时间" width="120"></el-table-column> -->
      <!--判断是否开充电卡-->
      <!--判断用户是啥类型用户-->
      <el-table-column prop="inviteUincome" label="邀请收益"></el-table-column>
      <el-table-column prop="createTime" label="邀请时间"/>

      <!-- <el-table-column prop="picture" label="资料附件">
          <template slot-scope="scope">
            <el-image
                    style="width: 150px;"
                    :src="scope.row.picture"
                  />
          </template>
        </el-table-column> -->
    
      <el-table-column label="操作" align="center" width="400" >
         <template slot-scope="scope">
          <el-button  type="primary" size="mini">
           <router-link :to="'/charging-pile/invite_detail/' + scope.row.id">
              查看
            </router-link>
          </el-button>

          <el-button 
            type="danger" 
            size="mini" 
            icon="el-icon-delete" 
            @click="removeId(scope.row.id)"
           >
             删除
             </el-button>
        
          </template>
      </el-table-column>

      <!--导入Excel表格-->

    </el-table>

    <!--分页组件-->
    <!--ize-change后面写1  current-change后面是5-->
    <el-pagination
      :current-page="page"
      :total="total"
      :page-size="limit"
      :page-sizes="[2, 10, 20]"
      style="padding: 30px 0"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="changePageSize"
      @current-change="changeCurrentPage"
    />
  </div>
</template>  

 

<script>
import ClientApi from '@/api/charging-pile/cilent'

export default {
  data() {
    return {
      list: null, //数据库列表
      total: 6, // 数据库中的总记录数
      page: 1, // 默认页码
      limit: 2, // 每页记录数
      //cpClient:{}, //客户对象
      searchObj: {}, // 查询条件   multipleSelection: [],
      dialogVisible: false, //文件上传对话框是否显示
      BASE_API: process.env.VUE_APP_BASE_API, //获取后端接口地址
       multipleSelection: [], // 批量选择中选择的记录列表
    }
  },

   
   mounted() {
    // 当页面加载时获取数据   mounted
    this.fetchData()
  },

    created () {
      
    },

      methods:{
        
      
          //Excel数据导出
            exportData() {
          window.location.href = this.BASE_API + '/admin/spread/cpInvite/export'
      },
        fetchData(){
          // if(this.searchObj.name == ''){
          //   this.searchObj.name = "undefined"
          // }
          // if(this.searchObj.mobile == ''){
          //   this.searchObj.mobile = "undefined"
          // }
          ClientApi.findInvite(this.page,this.limit,this.searchObj)
          .then(res =>{
            console.log(res);
            this.list = res.data.list
            this.total = res.count

          })
        },
        //每页记录条数改变,size:回调参数,表示当前选中的每页条数
        changePageSize(pagesize){
          this.limit = pagesize
          this.fetchData()
        },
        //改变页码 page:回调参数 表示当前选中的页码
        changeCurrentPage(pages){
          this.page = pages
          this.fetchData()
        },
        //重置表单
        resetData(){
          this.searchObj = {}
          this.fetchData()
        },
  
         
    //      save(){
    //     //this.$router.push(path:'/charging-pile/save'}
    //     this.$router.push({path:'/charging-pile/save'})
    //    },

      //  person(){
      //   this.$router.push({path:'/charging-pile/person'})
      //  },


         //导入Excel表格
         fileUploadSuccess(response) {
          if (response.code === 0) {
        this.$message.success('数据导入成功')
          this.dialogVisible = false
         } else {
          this.$message.error(response.message)
          }
      },
    //上传失败回调
    fileUploadError(error) {
      this.$message.error('数据导入失败')
    },

         
                 // 定义方法，进行请求接口调用
    // 当表格复选框选项发生变化的时候触发
    handleSelectionChange(selection) {
      console.log("进来了");
      console.log(selection)
      this.multipleSelection = selection
    },


           // 根据id删除数据
   removeId(id) {
        this.$confirm('此操作将永久删除该记录,是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
       .then(() => {
       return ClientApi.removeId(id)
        })
        .then((res) => {
          this.$message({
         message: res.message,
         type: 'success',
          })
         this.fetchData() //刷新页面
           })
        .catch((error) => {
          //console.log('error', error)
            if (error === 'cancel') {
          this.$message({
          type: 'info',
             message: '已取消删除',
            })
          }
          })
        },

                 //批量删除
    removeIds() {
      console.log('进来了')
      this.$confirm('此操作将永久删除故障信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          // 确定执行 then 方法
          var idList = []
          // 遍历数组得到每个 id 值，设置到 idList 里面
          for (var i = 0; i < this.multipleSelection.length; i++) {
            console.log('111')
            var obj = this.multipleSelection[i]
            var id = obj.id
            console.log('id:' + id)
            idList.push(id)
          }
          if (this.multipleSelection.length < 1) {
            alert('请选择要删除的对象')
          } else if (this.multipleSelection.length > 0) {
            // 调用接口
            ClientApi.removeIds(idList).then((response) => {
              console.log('response:' + response)
              // 提示
              this.$message({
                type: 'success',
                message: '删除成功!',
              })
              // 刷新页面
              this.fetchData()
            })
          }
        })
        .catch((error) => {
          //console.log('error', error)
          if (error === 'cancel') {
            this.$message({
              type: 'info',
              message: '已取消删除',
            })
          }
        })
    },
         

   }
    }

</script>